<template>

    <el-container>

        <el-header>
            <el-row class="block-col-2">
                <el-col :span="12">
                    <el-select @change="siteChange" v-model="curSiteId" filterable placeholder="请选择站点">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="12">
                    <el-date-picker @change="dateChange"  v-model="s_date"  type="daterange" value-format="yyyy-MM-dd" align="right" unlink-panels  range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
                    </el-date-picker>
                </el-col>
            </el-row>

        </el-header>
        <el-container style="min-height: 300px">
            <el-main>
                <div id="chart1" style="min-height: 300px"></div><!--浏览量-->
            </el-main>
        </el-container>


        <!--top指标-->
        <el-container style="min-height: 400px">
            <el-main style="width: 33%">
                <div id="topChart1" style="min-height: 300px"></div>
            </el-main>
            <el-main style="width: 33%">
                <div id="topChart2" style="min-height: 300px"></div>
                <!--计划结算量-->
            </el-main>
            <el-main style="width: 33%">
                <div id="topChart3" style="min-height: 300px"></div>
               <!-- 广告主结算量-->
            </el-main>

        </el-container>
    </el-container>

</template>


<script>
    import Cookies from 'js-cookie';
    export default {
        name: 'browser',
        data () {
            return {
                options: [],//网站下拉列表
                userid:'',
                curSiteId:'',
                s_date:'',
                wechat_days:['0:00-0:59','01:00-01:59','02:00-02:59','03:00-03:59','04:00-04:59','05:00-05:59'],
                wechat_nums:['0','0','0','0','0','0'],
                chrome_nums:['0','0','0','0','0','0'],
                qq_nums:['0','0','0','0','0','0'],
                wechat_top_urls:[],
                wechat_top_nums:['0','0','0','0','0','0','0','0','0','0'],
                chrome_top_urls:[],
                chrome_top_nums:['0','0','0','0','0','0','0','0','0','0'],
                qq_top_urls:[],
                qq_top_nums:['0','0','0','0','0','0','0','0','0','0'],
                pickerOptions2: {
                    shortcuts: [{
                        text: '近7天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);//往前推一天
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    },  {
                        text: '近14天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    },{
                        text: '近30天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 31);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '近半年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 181);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },

            }
        },
        methods:{
            dateChange:function () {
                //alert(this.s_date+'日期选择完后');
                this.getDatas();
            },
            siteChange:function () {
                this.getDatas();
            },
            getDatas(){
                //后台请求数据
                let params =new URLSearchParams();
                params.append("userid",this.userid);
                params.append("siteid",this.curSiteId);
                params.append("date",this.s_date);
                this.$axios.post('bro/getBrowserData',params).then((res)=> {
                    let wechatList = res.data.wechatList;
                    let chromeList = res.data.chromeList;
                    let qqList = res.data.qqList;

                    let wechatTops = res.data.wechatTops;
                    let chromeTops = res.data.chromeTops;
                    let qqbrowserTops = res.data.qqbrowserTops;

                    this.wechat_days=[];
                    this.wechat_nums=[];
                    this.chrome_nums=[];
                    this.qq_nums=[];
                    this.wechat_top_urls=[];
                    this.wechat_top_nums=[];
                    this.chrome_top_urls=[];
                    this.chrome_top_nums=[];
                    this.qq_top_urls=[];
                    this.qq_top_nums=[];

                     for(let i=0;i<wechatList.length;i++){
                         this.wechat_days.push(wechatList[i].day);
                         this.wechat_nums.push(wechatList[i].count);
                         this.chrome_nums.push(chromeList[i].count);
                         this.qq_nums.push(qqList[i].count);
                     }
                     //toplist
                    for(let i=0;i<wechatTops.length;i++){

                        this.wechat_top_urls.push(wechatTops[i].host);
                        this.wechat_top_nums.push(wechatTops[i].count);
                    }
                    for(let i=0;i<chromeTops.length;i++){

                        this.chrome_top_urls.push(chromeTops[i].host);
                        this.chrome_top_nums.push(chromeTops[i].count);
                    }
                    for(let i=0;i<qqbrowserTops.length;i++){

                        this.qq_top_urls.push(qqbrowserTops[i].host);
                        this.qq_top_nums.push(qqbrowserTops[i].count);
                    }


                    let myChart1 = this.$echarts.init(document.getElementById('chart1'));
                    let topChart1 = this.$echarts.init(document.getElementById('topChart1'));
                    let topChart2 = this.$echarts.init(document.getElementById('topChart2'));
                    let topChart3 = this.$echarts.init(document.getElementById('topChart3'));

                    //浏览器分析
                    let option = {
                        title: {
                            text: '浏览器访问量分析',
                            textStyle: {
                                fontWeight: 'normal',
                                color: '#27727B'          // 主标题文字颜色
                            }
                        },
                        tooltip: { trigger: 'axis'},
                        //图例名
                        legend: {
                            data:['Wechat','Chrome','QQbrowser']
                            //x: 'right'
                        },
                        grid: {
                            left: '1%',   //图表距边框的距离
                            right: '2%',
                            bottom: '0%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data:  this.wechat_days,
                            //坐标轴颜色
                            axisLine:{
                                lineStyle:{
                                    color:'#666'
                                }
                            },
                        },
                        yAxis : [
                            {
                                type : 'value',
                                //minInterval: 1,
                                //splitArea: { show: true },
                                axisLabel : {
                                    //formatter: '{value}'
                                    formatter: function(value,index){
                                        var value;
                                        if (value >=1000) {
                                            value = value/1000+'k';
                                        }else if(value <1000){
                                            value = value;
                                        }
                                        return value
                                    }
                                },
                                axisLine: {show: false },
                                axisTick: {show: false},
                            }
                        ],
                        series: [
                            {
                                name:'Wechat',
                                type:'line',
                                markPoint : {
                                    data : [
                                        {type : 'max', name: '最大值'},
                                        {type : 'min', name: '最小值'}
                                    ]
                                },
                                data:this.wechat_nums
                            },
                            {
                                name:'Chrome',
                                type:'line',
                                markPoint : {
                                    data : [
                                        {type : 'max', name: '最大值'},
                                        {type : 'min', name: '最小值'}
                                    ]
                                },
                                data:this.chrome_nums
                            },
                            {
                                name:'QQbrowser',
                                type:'line',
                                markPoint : {
                                    data : [
                                        {type : 'max', name: '最大值'},
                                        {type : 'min', name: '最小值'}
                                    ]
                                },
                                data:this.qq_nums
                            }]
                    };
                    myChart1.setOption(option);

                    topChart1.setOption({
                        title : {
                            text: 'Wechat',
                        },
                        yAxis : [
                            { data : this.wechat_top_urls,}
                        ],
                        series : [
                            { data:this.wechat_top_nums,}
                        ]
                    });
                    topChart2.setOption({
                        title : {
                            text: 'Chrome',
                        },
                        yAxis : [
                            { data : this.chrome_top_urls,}
                        ],
                        series : [
                            { data:this.chrome_top_nums,}
                        ]
                    });
                    topChart3.setOption({
                        title : {
                            text: 'QQBrowser',
                        },
                        yAxis : [
                            { data : this.qq_top_urls,}
                        ],
                        series : [
                            { data:this.qq_top_nums,}
                        ]
                    });


                }).catch((error)=> {
                    console.log(error);
                });
            },
            getSiteList:function () {
                let params =new URLSearchParams();
                params.append("userid",this.userid);
                this.$axios.post('/site/getSiteList',params).then((res)=> {
                    let list = res.data.list;
                    for(let i=0;i<list.length;i++){
                        this.options.push({"value":list[i].id,"label":list[i].siteName+"-"+list[i].siteHome});
                    }
                    if(list.length>0){
                        this.curSiteId=list[0].id;
                    }

                });

            },
        },
        mounted(){
            //条形图
            var option2 = {
                title : {
                    text: 'Wechat',
                    textStyle: {
                        fontWeight: 'normal',
                        color: '#1790cf'          // 主标题文字颜色
                    }
                },
                tooltip : {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',   //图表距边框的距离
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'value',
                        boundaryGap : [0, 0.01],
                        axisLine: {show: false},
                        axisTick: { show: false},
                        axisLabel : {
                            formatter: function(){
                                return "";
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisLine: {show: false },
                        axisTick: {show: false},
                        /*axisLabel:{
                            rotate:30
                        },*/
                    }
                ],
                series : [
                    {
                        name:'访问量',
                        type:'bar',
                        data:[],
                        barWidth: 16,
                        color:['#20a8d8'],
                        label: {
                            normal: {
                               // show: true,//是否显示数字
                                position: 'right',
                                offset: [5, -2],
                                textStyle: {
                                    color: '#20a8d8',
                                    fontSize: 10
                                }
                            }
                        },
                    }
                ]
            };
            //站长结算top10
            let topChart1 =this.$echarts.init(document.getElementById('topChart1'));
            topChart1.setOption(option2);
            //计划结算top10
            let topChart2 =this.$echarts.init(document.getElementById('topChart2'));
            topChart2.setOption(option2);
            //广告主结算top10
            let topChart3 =this.$echarts.init(document.getElementById('topChart3'));
            topChart3.setOption(option2);


            let userid = Cookies.get('xbsj_userid');
            this.userid = userid;

            //加载站点列表
            this.getSiteList();

            //初始化数据
            this.getDatas();


        }
    }



    function  getxInterval(x_num) {
        if(x_num < 40 && x_num >= 30){
            return 2;
        }else if(x_num <60 && x_num >= 40){
            return 3;
        }else if(x_num <80 && x_num >= 60){
            return 4;
        }else if(x_num <100 && x_num >= 80){
            return 5;
        }else if(x_num <120 && x_num >= 100){
            return 6;
        }else if(x_num <140 && x_num >= 120){
            return 7;
        }else if(x_num <160 && x_num >= 140){
            return 8;
        }else if(x_num <180 && x_num >= 160){
            return 9;
        }else if(x_num <200 && x_num >= 180){
            return 10;
        }else if(x_num <220 && x_num >= 200){
            return 11;
        }else if(x_num <240 && x_num >= 220){
            return 12;
        }else if(x_num >= 240){
            return 15;
        }else{
            return 0;
        }
    }
</script>

